---
title: Modal Sizes
description: Wide vs. Compact
---

# Modal Sizes

## Wide vs. Compact size

By default, RainbowKit's `modalSize` is set to `wide` (and looks like this):

<Img src="/modal-default.png" height="569" width="1029" />

We also provide a `compact` modal size, which looks like this:

<Img src="/modal-compact.png" height="569" width="1029" />

To set your modal size to `compact`, just add `modalSize="compact"` as a prop in your `RainbowKitProvider`:

```tsx
import { RainbowKitProvider } from '@rainbow-me/rainbowkit';

export const App = () => (
  <RainbowKitProvider modalSize="compact" {...etc}>
    {/* Your App */}
  </RainbowKitProvider>
);
```
